<!--拖动加载-->
<!--Drag-and-Drop-->
<template>
<div>
  <div id="map" class="mapC"></div>
  <div class="select_c">
    <a id="download" download></a>
    <div><el-checkbox v-model="checked"> Extract styles from KML </el-checkbox></div>
    <br />
    <div>
      <el-button @click="downloadD(1)" id="download-gpx">GPX</el-button>
      <el-button @click="downloadD(2)" id="download-geojson">GeoJSON</el-button>
      <el-button @click="downloadD(3)" id="download-igc">IGC</el-button>
      <el-button @click="downloadD(4)" id="download-kml">KML</el-button>
      <el-button @click="downloadD(5)" id="download-topojson">TopoJSON</el-button>
    </div>
  </div>
  <div id="info">&nbsp;</div>
  <div id="popup" class="ol-popup">
    <a @click="closeDiv" href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content">12354</div>
  </div>
</div>
</template>

<script>
import 'ol/ol.css'
import DragAndDrop from 'ol/interaction/DragAndDrop'
import Map from 'ol/Map'
import Overlay from 'ol/Overlay'
import View from 'ol/View'
import {GPX, GeoJSON, IGC, KML, TopoJSON} from 'ol/format'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import {Vector as VectorSource, XYZ} from 'ol/source'
import {toLonLat} from 'ol/proj.js'
import {toStringHDMS} from 'ol/coordinate.js'
export default {
  name: 'index',
  data () {
    return {
      map: null,
      overlay: null,
      container: null,
      content: null,
      closer: null,
      dragAndDropInteraction: null,
      checked: false
    }
  },
  mounted () {
    this.container = document.getElementById('popup')
    this.content = document.getElementById('popup-content')
    this.closer = document.getElementById('popup-closer')
    this.initMap()
  },
  methods: {
    initMap () {
      this.overlay = new Overlay({
        element: this.container,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      })
      this.raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      this.map = new Map({
        layers: [this.raster, this.raster2],
        target: 'map',
        overlays: [this.overlay],
        view: new View({
          center: [108.2, 29.07],
          // center: [0, 0],
          zoom: 4,
          projection: 'EPSG:4326'
        })
      })
      let that = this
      that.map.on('pointermove', function (evt) {
        if (evt.dragging) {
          return
        }
        const pixel = that.map.getEventPixel(evt.originalEvent)
        that.displayFeatureInfo(pixel)
      })
      that.map.on('singleclick', (evt) => {
        const coordinate = evt.coordinate
        // console.log(coordinate, 'ooooo')
        const hdms = toStringHDMS(toLonLat(coordinate))
        that.content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>'
        that.overlay.setPosition(coordinate)
        that.displayFeatureInfo(evt.pixel)
      })
      that.setInteraction()
    },
    closeDiv () {
      this.overlay.setPosition(undefined)
      this.closer.blur()
      return false
    },
    displayFeatureInfo (pixel) {
      const features = []
      this.map.forEachFeatureAtPixel(pixel, function (feature) {
        features.push(feature)
      })
      if (features.length > 0) {
        const info = []
        let i, ii
        for (i = 0, ii = features.length; i < ii; ++i) {
          info.push(features[i].get('name'))
        }
        document.getElementById('info').innerHTML = info.join(', ') || '&nbsp'
      } else {
        document.getElementById('info').innerHTML = '&nbsp;'
      }
    },
    // 拖动触发互动效果
    setInteraction () {
      let that = this
      if (that.dragAndDropInteraction) {
        that.map.removeInteraction(that.dragAndDropInteraction)
      }
      that.dragAndDropInteraction = new DragAndDrop({
        formatConstructors: [
          GPX,
          GeoJSON,
          IGC,
          // use constructed format to set options
          new KML({extractStyles: this.checked}),
          TopoJSON
        ]
      })
      that.dragAndDropInteraction.on('addfeatures', function (event) {
        console.log(event, 'event')
        const vectorSource = new VectorSource({
          features: event.features
        })
        that.map.addLayer(
          new VectorLayer({
            source: vectorSource
          })
        )
        that.map.getView().fit(vectorSource.getExtent())
      })
      that.map.addInteraction(that.dragAndDropInteraction)
    },
    // 数据下载
    download (fullpath, filename) {
      // fetch(fullpath)
      //   .then(function (response) {
      //     return response.blob()
      //   })
      // .then(function (blob) {
      //   if (navigator.msSaveBlob) {
      //     // link download attribuute does not work on MS browsers
      //     navigator.msSaveBlob(blob, filename)
      // } else {
      // 利用a标签的属性download下载数据
      const link = document.getElementById('download')
      // var tempLink = document.createElement('a')
      // tempLink.style.display = 'none'
      // link.href = URL.createObjectURL(blob)
      link.href = fullpath
      link.download = filename
      link.click()
      // }
      // })
    },
    downloadD (val) {
      if (val === 1) {
        this.download('./static/data/fells_loop.gpx', 'fells_loop.gpx')
      }
      if (val === 2) {
        this.download('./static/data/roads-seoul.geojson', 'roads-seoul.geojson')
      }
      if (val === 3) {
        this.download('./static/data/Ulrich-Prinz.igc', 'Ulrich-Prinz.igc')
      }
      if (val === 4) {
        this.download('./static/data/states.kml', 'states.kml')
      }
      if (val === 5) {
        this.download('./static/data/fr-departments.json', 'fr-departments.json')
      }
    }
  }
}
</script>

<style scoped>
  .mapC{
    width: 100vw;
    height: 100vh;
  }
  .select_c{
    width: 40vw;
    position: absolute;
    top: 0;
    left: 200px;
  }

  .ol-popup {
    position: absolute;
    background-color: white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 12px;
    left: -50px;
    min-width: 280px;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }
  .ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
  }
  .ol-popup-closer:after {
    content: "✖";
  }
</style>
